<template>
  <div class="monitor-box">
    <CardBox title="Top5物种"> </CardBox>
    <div class="content-container">
      <div class="statistics-chart" ref="speciesChart"></div>
    </div>
  </div>
</template>
<script>
import CardBox from "@/components/Global/CardBox.vue";
import {EventBus} from "../../utils/event-bus";
import * as echarts from "echarts";
import ecStat from 'echarts-stat';
export default {
  name: "Introduce",
  components: {
    CardBox,
  },
  data() {
    return {
      introduce:'',
    };
  },
  created() {
    EventBus.$on('set-multi-introduce', (message) => {
      this.introduce=message;
    });
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.speciesChart
      if (!chartDom) return

      const chart = echarts.init(chartDom,'dark');
      // 示例数据
      var rawData = {
        months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
        species: ['东北刺猬', '赤腹松鼠', '珠颈斑鸠', '乌鸫', '灰喜鹊', '白腹鸫', '黑水鸡', '虎斑地鸫'],
        records: [
          // 1月数据
          [
            {name: '东北刺猬', value: 4.58},
            {name: '赤腹松鼠', value: 0.27},
            {name: '黄鼬', value: 1.89},
            {name: '珠颈斑鸠', value: 101.89},
            {name: '灰喜鹊', value: 16.17},
            {name: '乌鸫', value: 6.2},
            {name: '白腹鸫', value: 1.35},
            {name: '虎斑地鸫', value: 0.81},
            {name: '黑水鸡', value: 0.81}
          ],
          // 2月数据
          [
            {name: '东北刺猬', value: 10.51},
            {name: '赤腹松鼠', value: 0.72},
            {name: '珠颈斑鸠', value: 73.19},
            {name: '乌鸫', value: 10.87},
            {name: '灰喜鹊', value: 7.97},
            {name: '白腹鸫', value: 1.45},
            {name: '黑水鸡', value: 0.36},
            {name: '鹊鸲', value: 0.36}
          ],
          // 3月数据
          [
            {name: '东北刺猬', value: 19.35},
            {name: '赤腹松鼠', value: 1.88},
            {name: '珠颈斑鸠', value: 89.25},
            {name: '乌鸫', value: 50},
            {name: '灰喜鹊', value: 7.53},
            {name: '灰椋鸟', value: 0.54},
            {name: '白腹鸫', value: 1.61},
            {name: '黑水鸡', value: 0.27},
            {name: '喜鹊', value: 1.08}
          ],
          // 4月数据
          [
            {name: '东北刺猬', value: 12.74},
            {name: '珠颈斑鸠', value: 19.43},
            {name: '乌鸫', value: 15.61},
            {name: '灰喜鹊', value: 3.5},
            {name: '灰背鸫', value: 0.96},
            {name: '喜鹊', value: 0.64},
            {name: '灰椋鸟', value: 0.32},
            {name: '山斑鸠', value: 0.32},
            {name: '丝光椋鸟', value: 0}
          ],
          // 5月数据
          [
            {name: '东北刺猬', value: 8.38},
            {name: '黄鼬', value: 0.57},
            {name: '乌鸫', value: 21.53},
            {name: '珠颈斑鸠', value: 21.81},
            {name: '灰喜鹊', value: 4.25},
            {name: '黑水鸡', value: 1.13},
            {name: '灰椋鸟', value: 1.13},
            {name: '白头鹎', value: 0.28},
            {name: '白颊噪鹛', value: 0.28}
          ],
          // 6月数据
          [
            {name: '东北刺猬', value: 8.38},
            {name: '黄鼬', value: 0.28},
            {name: '赤腹松鼠', value: 0.28},
            {name: '乌鸫', value: 22.91},
            {name: '珠颈斑鸠', value: 18.99},
            {name: '灰喜鹊', value: 4.47},
            {name: '黑水鸡', value: 0.28},
            {name: '戴胜', value: 0.56}
          ],
          // 7月数据
          [
            {name: '东北刺猬', value: 5.38},
            {name: '黄鼬', value: 0.27},
            {name: '赤腹松鼠', value: 0},
            {name: '乌鸫', value: 22.58},
            {name: '珠颈斑鸠', value: 31.99},
            {name: '灰喜鹊', value: 4.84},
            {name: '白头鹎', value: 1.08},
            {name: '黑脸噪鹛', value: 0.54}
          ]
          ,
          // 8月数据
          [
            {name: '东北刺猬', value: 3.49},
            {name: '黄鼬', value: 0.54},
            {name: '赤腹松鼠', value: 0},
            {name: '乌鸫', value: 18.82},
            {name: '珠颈斑鸠', value: 20.7},
            {name: '灰喜鹊', value: 3.76},
            {name: '白头鹎', value: 0.54},
            {name: '黑脸噪鹛', value: 0}
          ]
        ]
      };

      // 处理数据：获取每个月前五并排序
      function processData(rawData) {
        var processed = {
          months: rawData.months,
          records: []
        };

        rawData.records.forEach(function(monthData) {
          // 排序（从高到低）
          var sorted = monthData.sort(function(a, b) {
            return b.value - a.value;
          });
          // 取前五
          processed.records.push(sorted.slice(0, 5));
        });

        return processed;
      }

      var data = processData(rawData);

      // 准备系列数据（每个排名位置一个系列）
      var series = [];
      for (var rank = 0; rank < 5; rank++) {
        series.push({
          name: '排名' + (rank + 1),
          type: 'bar',
          data: []
        });
      }

      // 填充系列数据
      data.records.forEach(function(monthData) {
        for (var rank = 0; rank < 5; rank++) {
          if (monthData[rank]) {
            series[rank].data.push({
              value: monthData[rank].value,
              name: monthData[rank].name
            });
          } else {
            series[rank].data.push(null);
          }
        }
      });

      // 配置项
      var option = {
        title: {
          text: '每月物种相对多度指数前五排名',
          subtext: '数据为每月物种相对多度指数前五的物种（从高到低排序）',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          formatter: function(params) {
            var month = data.months[params[0].dataIndex];
            var result = month + '<br/>';

            // 过滤掉null值
            var validParams = params.filter(function(param) {
              return param.value !== null;
            });

            validParams.forEach(function(param, index) {
              result += param.marker + ' ' + param.seriesName + ': ' +
                      param.data.name + ' (' + param.value + ')<br/>';
            });

            return result;
          }
        },
        // legend: {
        //   data: ['排名1', '排名2', '排名3', '排名4', '排名5'],
        //   bottom: 10
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: data.months,
          axisLabel: { interval: 0 }
        },
        yAxis: {
          type: 'value',
          name: '指数',
          axisLabel: { formatter: '{value}' }
        },
        series: series,
        color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'],
        // 调整柱子布局
        barWidth: 15,
        barGap: '30%',
        barCategoryGap: '40%'
      };
      chart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>

.statistics-chart {
  width: 100%;
  height: 100%;
}
  .content-container{
    height: 380px;
  }
</style>